<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NForm, NFormItem, NInput, NSelect, NButton, NSpace } from 'naive-ui'
import type { } from 'naive-ui'
import type { ModelInfo } from '../component/model'
import http from '@/tools/http'
import { useDictStore } from '@/stores/dictStore'

const router = useRouter()
const dictStore = useDictStore()

const queryParams = reactive({
    modelName: "",
    modelGroup: undefined
})

const deploymentModelList = reactive<ModelInfo[]>([])

onMounted(() => {
    getDeploymentList()
})

function getDeploymentList() {
    http.post("/workflow/re/model/deploment/list", queryParams).then(({ data }) => {
        if (data.code === "0") {
            deploymentModelList.length = 0
            for (let i = 0; i < data.data.length; i++) {
                deploymentModelList.push(data.data[i])
            }
        }
    })
}

function openFlowSubmit(modelId: string, modelVersion: number, mode: string) {
    router.push({
        name: "workflow-info",
        query: { modelId: modelId, modelVersion: modelVersion, mode: mode }
    })
}
</script>

<template>
    <div id="flame-container">
        <div class="search">
            <n-form :model="queryParams" inline label-placement="left">
                <n-form-item label="流程名称" path="modelName">
                    <n-input v-model:value="queryParams.modelName" placeholder="请输入流程名称" clearable />
                </n-form-item>
                <n-form-item label="流程分组" path="modelGroup">
                    <n-select style="width:196px" v-model:value="queryParams.modelGroup"
                        :options="dictStore.dict('WORKFLOW_GROUP')" placeholder="请选择流程分组" clearable />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="getDeploymentList()">查询</n-button>
                </n-form-item>
            </n-form>
        </div>
        <div class="content" style="padding:12px;">
            <n-space vertical>
                <div v-for="(group, index) in dictStore.dict('WORKFLOW_GROUP')" :key="group.value">
                    {{ group.label }}
                    <n-space>
                        <div v-for="(model, index) in deploymentModelList" :key="model.modelId">
                            <div v-if="model.modelGroup === group.value">
                                <n-button quaternary type="primary"
                                    @click="openFlowSubmit(model.modelId, model.modelVersion, '2')">
                                    {{ model.modelName }}
                                </n-button>
                            </div>
                        </div>
                    </n-space>
                </div>
            </n-space>
        </div>
    </div>
</template>

<style scoped></style>